<template>
    <div>
        <div id="job-head">
            <div class="job-top">
                <div class="job-top-left">
                    <p>
                        <span class="job-d-name">{{jobList.name}}</span>
                        <span class="job-d-salary">{{jobList.min}}-{{jobList.max}}{{jobList.salaryUnit}}</span>
                    </p>
                    <p class="job-other-detail">
                        <!-- {{jobList.addressObj.cityName}} | {{jobList.expObj.name}} | {{jobList.eduObj.name}} -->
                    </p>
                    <p class="job-d-posttime">{{jobList.publishTime}}发布</p>
                </div>
                <div class="job-check-btn"
                @mouseover="hpchange()" @mouseout="hpHide()">
                    立即沟通
                </div>
                <div class="ewm-boxs ewmHide" :class="{ewmShow:ishover==1}">
                    <div class="check-ewm-box">
                        <div class="check-ewm">
                            <img src="../assets/companyDetail/正三角形.png" alt="">
                            <div class="ewm"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="jobDetail">
            <div id="intro-left">
                <div>
                    <p class="title" style="margin-top:20px;">公司福利</p>
                    <div class="fuli-btn" v-if="jobList.comDoc.otherBenefitList != null">
                        <div v-for="b in jobList.comDoc.otherBenefitList" :key="b">{{b}}</div>
                    </div>
                    <div>
                        <p class="texts">其他福利：</p>
                        <p class="texts"></p>
                    </div>
                </div>
                <div>
                    <p class="title">职位详情</p>
                    <div>
                        <p class="texts" v-html="jobList.note"></p>
                    </div>
                </div>
                <div>
                    <p class="title">公司介绍</p>
                    <div>
                        <p class="texts">{{jobList.comDoc.note}}</p>
                    </div>
                </div>
                <div>
                    <p class="title">公司地址</p>
                    <div v-for="(i,index) in 1" :key="i">
                        <div class="locate-bottom mapshows" @click="mapclick(index)"
                        :class="{maphides:mapIndexs === index}">
                            <p class="texts">
                                <span class="locate-detail">
                                    {{jobList.addressObj.proName}}-{{jobList.addressObj.cityName}}-{{jobList.addressObj.areaName}}
                                </span>{{jobList.addressObj.address}}
                            </p>
                            <img src="../assets/companyDetail/箭头下.png" alt="">
                        </div>
                        <div class="com-map maphide" :class="{mapshow:mapIndexs === index}"
                        @click="mapclick(index)">
                            <p class="texts">
                                <span class="locate-detail">
                                    {{jobList.addressObj.proName}}-{{jobList.addressObj.cityName}}-{{jobList.addressObj.areaName}}
                                </span>{{jobList.addressObj.address}}
                            </p>
                            <img src="../assets/companyDetail/箭头上.png" alt="">
                            <div class="map" id="container">
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="intro-right">
                <p class="title">公司基本信息</p>
                <div>
                    <div class="tx">
                        <img :src="'https://res.mashangu.com/'+jobList.comDoc.img" alt="">
                    </div>
                    <span class="com-name">{{jobList.comDoc.abbrName}}</span>
                </div>
                <div>
                    <ul class="com-list">
                        <li>
                            <img src="../assets/jobDetail/icon_rongzi.png" alt="">
                            <span>{{jobList.comDoc.financeObj.name}}</span>
                        </li>
                        <li>
                            <img src="../assets/jobDetail/icon_renshu.png" alt="">
                            <span>{{jobList.comDoc.scaleObj.name}}</span>
                        </li>
                        <li>
                            <img src="../assets/jobDetail/icon_hangye.png" alt="">
                            <span>{{jobList.comDoc.tradeObj.name}}</span>
                        </li>
                        <li v-if="jobList.comDoc.userId != null">
                            <img src="../assets/jobDetail/icon_guanwnag.png" alt="">
                            <span>{{jobList.comDoc.userId}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import {getHotBox1List} from '../api/hot-pro-box/hot-box1'
import {getProfessionList} from '../api/profession'
import AMap from 'AMap' // 引入高德地图
export default {
    name:'jobDetail',
    data() {
        return {
            mapIndexs:0,
            ishover:0,
            id:'',
            hotIndex:0,
            jobList:{},
            lat:"",
            lng:"",
            inPageIndex:0,
            pages:0,
            poiId:''
        }
    },
    created() {
        this.getParams();
    },
    mounted () {
        this.init()
    },
    methods: {
        mapclick(index){
            if(this.mapIndexs == index){
                this.mapIndexs = -1;
            }
            else{
                this.mapIndexs = index;
            }
            // console.log(this.mapIndexs)
        },
        hpchange(){
            this.ishover = 1;
        },
        hpHide(){
            this.ishover = 0;
        },
        getParams(){
			this.id = this.$route.query.id;
            if(this.id != ''){
                this.hotIndex = this.$route.query.hotIndex;
                getHotBox1List(this.hotIndex).then(res =>{
                    this.jobList = res.data.data;
                    console.log(res.data.data);
                    for(var i=0;i<res.data.data.length;i++){
                        if(this.id == res.data.data[i].id){
                            // console.log(res.data.data[i]);
                            this.jobList = res.data.data[i];
                            this.lat = this.jobList.addressObj.lat;
                            this.lng = this.jobList.addressObj.lng;
                            this.jobList.note = this.jobList.note.replace(/\n/g, "<br>");
                        }
                    }
                })
            }else{
                this.inPageIndex = this.$route.query.inPageIndex;
                if(this.inPageIndex != ''){
                    this.pages = this.$route.query.pages;
                    getProfessionList(this.pages,30).then(res =>{
                        console.log(res.data.data[this.inPageIndex])
                        this.jobList = res.data.data[this.inPageIndex];
                        this.lat = this.jobList.addressObj.lat;
                        this.lng = this.jobList.addressObj.lng;
                        this.jobList.note = this.jobList.note.replace(/\n/g, "<br>");
                    })
                }
                else{
                    // console.log('ll')
                    this.poiId = this.$route.query.poiCateId;
                    getProfessionList(1,493,this.$route.query.areaId,this.$route.query.eduId,
                    this.$route.query.expId,null,this.$route.query.salaryMax,this.$route.query.salaryMin,
                    this.$route.query.poiName,this.$route.query.type,this.poiId).then(res =>{
                        console.log(res.data.data[0])
                        this.jobList = res.data.data[0];
                        this.lat = this.jobList.addressObj.lat;
                        this.lng = this.jobList.addressObj.lng;
                        // this.jobList.note = this.jobList.note.replace(/\n/g, "<br>");
                    })
                }
            }
		},
        init () {
            let map = new AMap.Map('container', {
                center: [this.lng, this.lat],
                resizeEnable: true,
                zoom: 15
            })
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(this.lng, this.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                // title: '北京'
            });

            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
        }
    },
}
</script>
<style>
#jobDetail{
    padding-bottom: 68px;
    width: 1184px;
    margin:0 auto;
}

#jobDetail .title{
    color: #273B4E;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 36px;
}

#jobDetail .texts{
    color: #646A7E;
    font-size: 14px;
    line-height: 28px;
}

#jobDetail .locate-detail{
    color: #1958FB;
}

#job-head{
    width: 1920px;
    height: 214px;
    background-image: url('../assets/jobDetail/bg.png');
    position: relative;
}

#job-head .job-top{
    width: 1184px;
    margin: 0 auto;
    padding: 58px 0 44px 0;
}

#job-head .job-top .job-d-name{
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin-right: 32px;
}

#job-head .job-top .job-d-salary{
    color: #FF6D43;
    font-size: 32px;
}

#job-head .job-top .job-other-detail{
    font-size: 16px;
    color: white;
    opacity: 0.8;
    margin-top: 14px;
}

#job-head .job-top .job-check-btn{
    width: 284px;
    height: 44px;
    background: linear-gradient(132deg, #FF9F6E 0%, #FB734A 100%);
    border-radius: 6px;
    color: white;
    text-align: center;
    line-height: 44px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    float: right;
    margin-top: 27px;
}

#job-head .job-top .job-d-posttime{
    font-size: 14px;
    color: white;
    opacity: 0.6;
    margin-top: 36px;
}

#job-head .job-top-left{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

#job-head .ewm-boxs{
    position: absolute;
    top: 138px;
    left: 1408px;
}

.ewmShow{
    display: block !important;
}

.ewmHide{
    display: none;
}

#intro-left{
    width: 853px;
    margin-right: 32px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    padding-right: 15px;
    border-right: 1px solid #EBEBEB;
    box-sizing: border-box;
    margin-top: 32px;
}

#intro-left .fuli-btn{
    margin-bottom: 20px;
}

#intro-left .fuli-btn div{
    height: 24px;
    border-radius: 12px;
    border: 1px solid #3979FF;
    display: inline-block;
    margin-right: 16px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #3979FF;
    line-height: 24px;
}

#intro-left .com-map{
    width: 838px;
    height: 254px;
    background-color: #F7FBFF;
    padding-top: 6px;
    box-sizing: border-box;
    position: relative;
}

#intro-left .com-map p{
    display: inline-block;
}

#intro-left .com-map img{
    width: 14px;
    position: absolute;
    top: 12px;
    left: 814px;
}

#intro-left .com-map .map{
    width: 822px;
    height: 206px;
    margin: 6px 8px 8px 8px;
    background-color: yellowgreen;
}

#intro-left .locate-bottom{
    margin-top: 8px;
    position: relative;
}

#intro-left .locate-bottom p{
    display: inline-block;
}

#intro-left .locate-bottom img{
    width: 14px;
    position: absolute;
    top: 4px;
    left: 814px;
}

#intro-right{
    width: 284px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    position: relative;
}

#intro-right .tx{
    width: 56px;
    height: 56px;
    background-color: white;
    display: inline-block;
    /* 解决div并排错位 */
    /* vertical-align:top; */
}

#intro-right .tx img{
    width: 56px;
}

#intro-right .com-name{
    margin-left:12px;
    position: absolute;
    top: 90px;
}

#intro-right .com-list{
    margin-top: 17px;
}

#intro-right .com-list li{
    display: block;
    margin-bottom: 22px;
    position: relative;
}

#intro-right .com-list li img{
    margin-right: 12px;
    margin-top: 2px;
    position: absolute;
    top: 2px;
}

#intro-right .com-list li span{
    font-size: 14px;
    color: #273B4E;
    margin-left: 28px;
}

.mapshow{
    display: block !important;
}

.maphide{
    display: none;
}

.mapshows{
    display: block;
}

.maphides{
    display: none !important;
}
</style>